<template>
  <div id="canvasbg"></div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Provide } from "vue-property-decorator";
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh,
  Object3D
} from "three";
@Component
export default class BgMath extends Vue {
  @Provide() scene: Scene = new Scene();
  @Provide() camera: PerspectiveCamera = new PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  @Provide() renderer: WebGLRenderer = new WebGLRenderer();
  @Provide() cube: Object3D = new Object3D();
  @Provide() render = () => {
    requestAnimationFrame(this.render);
    this.cube.rotation.x += 0.1;
    this.cube.rotation.y += 0.1;
    this.renderer.render(this.scene, this.camera);
  };
  initthree(): void {
    var geometry = new BoxGeometry(1, 1, 1);
    var material = new MeshBasicMaterial({
      color: 0x00ff00
    });
    this.cube = new Mesh(geometry, material);
    this.scene.add(this.cube);
    this.camera.position.z = 5;
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById("canvasbg")!.appendChild(this.renderer.domElement);
  }
  mounted(): void {
    this.initthree();
    this.render();
  }
}
</script>


<style scoped lang="scss">
#canvasbg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
</style>
